<style lang="less">
     @import './index.less';
</style>

<template>
    <div>
      <Card shadow>
            <Row>
              <i-col span="20" class="margin-bottom-5">
                  <Input placeholder="关键字" size="small" style="width: 200px"></Input>
                  <Button class="margin-right-5" type="primary" size="small" icon="ios-search">搜索</Button>
              </i-col>
            </Row>
            <Table :columns="columns" :data="accounts"></Table>
            <Page :total="accounts.length" show-total></Page>
        </Card>
        <Modal v-model="modifyModal" title="修改账号" width="800" ok-text="保存" @on-ok="save">
            <Row>
                <i-col span="16" offset="4">
                    <Form :model="modifyForm" label-position="left" :label-width="80">
                        <FormItem label="账号">
                            <Input v-model="modifyForm.user_name" disabled></Input>
                        </FormItem>
                        <FormItem label="角色">
                           <Select v-model="modifyForm.role_id">
                                <Option v-for="r in roleList" :value="r.roleId" :key="r.roleId">{{ r.roleName }}</Option>
                          </Select> 
                        </FormItem>
                    </Form>
                </i-col>
            </Row>
        </Modal>
    </div>
</template>

<script>

  export default {
    data () {
      return {
        accounts:[],
        showModal: false,
        addModal: false,
        modifyModal: false,
        employees:[],
        roleList:[],
        conunt: 0,
        addForm: {},
        showForm: {},
        modifyForm: {},
        columns: [
          {
            type: 'index',
            align: 'center',
            width: 150,
          },{
            title: '账号',
            align: 'center',
            key: 'user_name'
          },{
            title: '用户',
            align: 'center',
            key: 'employee_name',
            render: (h,params) => {
              if(!params.row.employee_name) {
                return h('span',{
                  style:{
                    color:'#ff9900'
                  }
                },'暂未有用户')
              }else {
                return h('span',{},params.row.employee_name)
              }
            }
          },
          {
            title: '角色',
            align: 'center',
            key: 'role_name'
          }, {
            title: '账号状态',
            align: 'center',
            key: 'enabled',
            render: (h,params) => {
              if(params.row.enabled === true) {
                return h('i-switch',{
                  props:{
                    value:true,
                    size:'small',
                  },
                  on: {
                    'on-change':() => {
                      this.switchChange(params.row)
                    }
                  }
                })
              }else {
                return h('i-switch', {
                  props: {
                    value:false,
                    size:'small',
                  },
                  on: {
                  'on-change': () => {
                    this.switchChange(params.row)
                    }
                  }
                })
              }
            }
          }, {
            title: '操作',
            width: 180,
            align: 'center',
            key: 'action',
            render: (h, params) => {
              return h('div', [
                h('Tooltip', {
                  props: {
                    placement: 'top',
                    content: '修改'
                  }
                }, [h('Button', {
                  props: {
                    size: 'small',
                    icon: 'edit',
                    type: 'text'
                  },
                  on: {
                    click: () => {
                      this.modify(params.row);
                    }
                  }
                })]),
                h('Tooltip', {
                  props: {
                    placement: 'top',
                    content: '删除'
                  }
                }, [h('Button', {
                  props:{
                    size:'small',
                    icon:'trash-a',
                    type:'text',
                    disabled:params.row.enabled === true
                  },
                  on: {
                    click: () => {
                      this.remove(params.row);
                    }
                  }
                })])
              ]);
            }
          }]
      };
    },
    methods: {
      getAccount() {
        this.$http.get('/sys/users').then((res) => {
          console.info(res)
          this.accounts = res.data.returnValue
        })
      },
      getRole() {
        this.$http.get('/sys/roles').then((res) => {
          console.info(res)
          this.roleList = res.data
        })
      },
      add () {
        this.addModal = true;
      },
      show (rowData) {
        this.showModal = true;
        this.showForm = rowData;
      },
      switchChange(rowData) {
        console.info(rowData)
        if(rowData.enabled) {
          this.$Modal.confirm({
            title: '确认',
            content: '确认要暂停使用【' + rowData.user_name + '】的使用吗？',
            onOk: () => {
              rowData.enabled = !rowData.enabled
              this.$http.put('/sys/user',rowData).then((res) => {
                console.info(res)
              })
            }
          });
        }else {
          this.$Modal.confirm({
            title: '确认',
            content: '确认要激活【' + rowData.user_name + '】账号吗？',
            onOk: () => {
              rowData.enabled = !rowData.enabled
              this.$http.put('/sys/user',rowData).then((res) => {
                console.info(res)
                if(res.data.success === false) {
                  this.$Message.error('请先为该账号配置权限！')
                  rowData.enabled = !rowData.enabled
                }
              })
            }
          });
        }
      },
      modify (rowData) {
        this.modifyModal = true;
        this.modifyForm = rowData;
        this.getRole()
      },
      remove (index) {
      },
      save() {
        console.info(this.modifyForm)
        this.$http.put('/sys/user',this.modifyForm).then((res) => {
          this.$Message.success(res.data.message)
          this.getAccount()
        }).catch(() => {
          this.$Message.error('修改失败，请稍后重试！')
        })
      }
    },
    components: {
    },
    computed: {},
    watch: {},
    mounted () {
      this.getAccount()
    }
  };
</script>
